<template>
  <div class="content">
    <div class="search-box">
      <span>共找到<span class="num">2898</span>所学校</span>
    </div>

    <div class="university-list">
      <div>
        <div class="university-list-box" v-for="item in universityList" :key="item.id">
          <div class="university-list-box-img">
            <img :src="item.link" alt="">
          </div>
          <div class="university-list-box-content">
            <div class="university-list-box-content-title">
              <span>{{ item.name }}</span>
            </div>
            <div class="university-list-box-content-info">
              <span v-for="(item2, index) in item.tags">{{ item2 }}<span
                  v-if="index != item.tags.length - 1">|</span></span>
            </div>
          </div>
          <div class="university-list-box-grade">
            <button>学校详情</button>
          </div>
          <div class="university-list-box-compare">
            <button>+对比</button>
          </div>
        </div>
      </div>
      <div class="page">
        <Pagination v-model:current="current" show-quick-jumper :showSizeChanger="false" :locale="customLocale" :total="500" @change="onChange">
          <template #itemRender="{ type, originalElement }">
            <a v-if="type === 'prev'">上一页</a>
            <a v-else-if="type === 'next'">下一页</a>
            <component :is="originalElement" v-else></component>
          </template>
        </Pagination>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { ref } from 'vue';
import { universityList } from './data'
import { Pagination } from 'ant-design-vue'

const current = ref<number>(1);
const onChange = (pageNumber: number) => {
  console.log('Page: ', pageNumber);
};
const customLocale = {
        items_per_page: '/页',
        jump_to: '到第',
        page: '页',
        prev_page: '上一页',
        next_page: '下一页',
      }
</script>

<style lang="less" scoped>
@import "./index.less";
:deep(:where(.css-dev-only-do-not-override-1qb1s0s).ant-pagination .ant-pagination-item-active a){
  color:red;
}
:deep(:where(.css-dev-only-do-not-override-1qb1s0s).ant-pagination .ant-pagination-item-active){
  border-color: red;
}
</style>
